<template>
  <ele-modal
    :width="950"
    :visible="visible"
    :confirm-loading="loading"
    :title="'整单退货'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="24" :sm="24" :xs="24">
          <table cellpadding="0" cellspacing="0" class="recepit_table2">
            <tr>
              <td class="tit">销售单号</td>
              <td>{{ info.order_sn || '' }}</td>
              <td class="tit">销售时间</td>
              <td>{{ info.sales_time || '' }}</td>
            </tr>
            <tr>
              <td class="tit">会员昵称</td>
              <td>{{ info.nickname || '' }}</td>
              <td class="tit">会员手机</td>
              <td>{{ info.mobile || '' }}</td>
            </tr>
          </table>
        </a-col>
        <a-col :md="24" :sm="24" :xs="24" style="margin-top: 15px">
          <div class="margin-top-15" v-if="goods_list.length > 0">
            <div class="flex align-center justify-between margin-bottom-15">
              <span class="fs-14">首饰销售</span>
            </div>
            <vxe-table border ref="xTable" align="center" :data="goods_list">
              <vxe-column
                field="info"
                title="货品信息"
                width="180"
                fixed="left"
              >
                <template #default="{ row }">
                  <div>{{ row.bar_code }}</div>
                  <div class="margin-top-6">{{ row.name }}</div>
                </template>
              </vxe-column>
              <vxe-column field="num" title="数量" />
              <vxe-column field="pay_amount" title="金额" />
              <vxe-column field="order_sn" width="180" title="消费单号" />
              <vxe-column field="send_cash" title="赠送积分" />
              <vxe-column field="send_points" title="赠送礼金" />
              <vxe-column field="real_amount" title="应退金额" />
            </vxe-table>
          </div>
          <div class="margin-top-15" v-if="ornament_list.length > 0">
            <div class="flex align-center justify-between margin-bottom-15">
              <span class="fs-14">饰品销售</span>
            </div>
            <vxe-table border ref="xTable" align="center" :data="ornament_list">
              <vxe-column
                field="info"
                title="货品信息"
                width="180"
                fixed="left"
              >
                <template #default="{ row }">
                  <div>{{ row.bar_code }}</div>
                  <div class="margin-top-6">{{ row.name }}</div>
                </template>
              </vxe-column>
              <vxe-column field="num" title="数量" />
              <vxe-column field="pay_amount" title="金额" />
              <vxe-column field="order_sn" width="180" title="消费单号" />
              <vxe-column field="send_cash" title="赠送积分" />
              <vxe-column field="send_points" title="赠送礼金" />
              <vxe-column field="real_amount" title="应退金额" />
            </vxe-table>
          </div>
          <div class="margin-top-15" v-if="new_exchange_list.length > 0">
            <div class="flex align-center justify-between margin-bottom-15">
              <span class="fs-14">新品换购</span>
            </div>
            <vxe-table
              border
              ref="xTable"
              align="center"
              :data="new_exchange_list"
            >
              <vxe-column
                field="info"
                title="货品信息"
                width="180"
                fixed="left"
              >
                <template #default="{ row }">
                  <div>{{ row.bar_code }}</div>
                  <div class="margin-top-6">{{ row.name }}</div>
                </template>
              </vxe-column>
              <vxe-column field="num" title="数量" />
              <vxe-column field="pay_amount" title="金额" />
              <vxe-column field="order_sn" width="180" title="消费单号" />
              <vxe-column field="send_cash" title="赠送积分" />
              <vxe-column field="send_points" title="赠送礼金" />
              <vxe-column field="real_amount" title="应退金额" />
            </vxe-table>
          </div>
          <div class="margin-top-15" v-if="junk_exchange_list.length > 0">
            <div class="flex align-center justify-between margin-bottom-15">
              <span class="fs-14">旧货换购</span>
            </div>
            <vxe-table
              border
              ref="xTable"
              align="center"
              :data="junk_exchange_list"
            >
              <vxe-column
                field="info"
                title="货品信息"
                width="180"
                fixed="left"
              >
                <template #default="{ row }">
                  <div>{{ row.bar_code }}</div>
                  <div class="margin-top-6">{{ row.name }}</div>
                </template>
              </vxe-column>
              <vxe-column field="num" title="数量" />
              <vxe-column field="pay_amount" title="金额" />
              <vxe-column field="order_sn" width="180" title="消费单号" />
              <vxe-column field="send_cash" title="赠送积分" />
              <vxe-column field="send_points" title="赠送礼金" />
              <vxe-column field="real_amount" title="应退金额" />
            </vxe-table>
          </div>
          <div class="margin-top-15" v-if="junk_recovery_list.length > 0">
            <div class="flex align-center justify-between margin-bottom-15">
              <span class="fs-14">旧货回收</span>
            </div>
            <vxe-table
              border
              ref="xTable"
              align="center"
              :data="junk_recovery_list"
            >
              <vxe-column
                field="info"
                title="货品信息"
                width="180"
                fixed="left"
              >
                <template #default="{ row }">
                  <div>{{ row.bar_code }}</div>
                  <div class="margin-top-6">{{ row.name }}</div>
                </template>
              </vxe-column>
              <vxe-column field="num" title="数量" />
              <vxe-column field="pay_amount" title="金额" />
              <vxe-column field="order_sn" width="180" title="消费单号" />
              <vxe-column field="send_cash" title="赠送积分" />
              <vxe-column field="send_points" title="赠送礼金" />
              <vxe-column field="real_amount" title="应退金额" />
            </vxe-table>
          </div>
          <div class="margin-top-15" v-if="gift_list.length > 0">
            <div class="flex align-center justify-between margin-bottom-15">
              <span class="fs-14">赠品列表</span>
            </div>
            <vxe-table border ref="xTable" align="center" :data="gift_list">
              <vxe-column
                field="info"
                title="货品信息"
                width="180"
                fixed="left"
              >
                <template #default="{ row }">
                  <div>{{ row.bar_code }}</div>
                  <div class="margin-top-6">{{ row.name }}</div>
                </template>
              </vxe-column>
              <vxe-column field="num" title="数量" />
              <vxe-column field="pay_amount" title="金额" />
              <vxe-column field="order_sn" width="180" title="消费单号" />
              <vxe-column field="send_cash" title="赠送积分" />
              <vxe-column field="send_points" title="赠送礼金" />
              <vxe-column field="real_amount" title="应退金额" />
            </vxe-table>
          </div>
        </a-col>
        <a-col :md="24" :sm="24" :xs="24" style="margin-top: 15px">
          <div class="fs-14 flex align-center"
            ><span class="pay_label">现金：</span
            ><h6>{{ payInfo.cash || 0 }}</h6></div
          >
          <div class="fs-14 flex align-center"
            ><span class="pay_label">微信：</span
            ><h6>{{ payInfo.wechat || 0 }}</h6></div
          >
          <div class="fs-14 flex align-center"
            ><span class="pay_label">支付宝：</span
            ><h6>{{ payInfo.alipay || 0 }}</h6></div
          >
          <div class="fs-14 flex align-center"
            ><span class="pay_label">刷卡：</span
            ><h6>{{ payInfo.card || 0 }}</h6></div
          >
          <div class="fs-14 flex align-center"
            ><span class="pay_label">银行转账：</span
            ><h6>{{ payInfo.transfer || 0 }}</h6></div
          >
          <div class="fs-14 flex align-center"
            ><span class="pay_label">收款金额：</span
            ><h6>{{ info.pay_amount || 0 }}</h6></div
          >
        </a-col>
        <a-col
          :md="24"
          :sm="24"
          :xs="24"
          style="border: 1px solid #e5e5e5; padding: 15px; margin-top: 15px"
        >
          <div class="fs-14 flex align-center margin-bottom-15"
            >应退金额：<h6>{{ payInfo.total_amount || 0 }}</h6></div
          >
          <!-- <div class="fs-14 flex align-center ele-text-danger margin-bottom-15"
            >实退金额：<h6 class="ele-text-danger">10000</h6></div
          > -->
          <a-form-item label="退款方式">
            <a-select
              placeholder="请选择"
              mode="multiple"
              :options="options"
              @change="change"
              @deselect="change2"
            />
          </a-form-item>
		  <template  v-for="(item, index) in options" :key="index">
			  <a-form-item :label="item.label" v-if="item.isSelect">
				<a-input
				  allow-clear
				  placeholder="请输入"
				  v-model:value="form[item.value]"
				  autocomplete="off"
				/>
			  </a-form-item>
		  </template>
          <!-- <a-form-item label="现金" v-if="options[0].isSelect">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.cash"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="微信" v-if="options[1].isSelect">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.wechat"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="支付宝" v-if="options[2].isSelect">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.alipay"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="刷卡" v-if="options[3].isSelect">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.card"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="银行转账" v-if="options[4].isSelect">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.transfer"
              autocomplete="off"
            />
          </a-form-item> -->
          <a-form-item label="备注">
            <a-input
              allow-clear
              placeholder="请输入"
              v-model:value="form.note"
              autocomplete="off"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>
  import { ref, unref, reactive, onMounted, watch } from 'vue';
  import { Modal, message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import { get_pay_type_select } from '@/api/setting/pay_type';
  import { get_sales_detail } from '@/api/order/order/sales/order_list';

  const emit = defineEmits(['update:visible', 'orderRefund']);
  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    orderSn: String
  });

  const loading = ref(false);
  const info = ref({});
  const payInfo = ref({});
  const goods_list = ref([]);
  const ornament_list = ref([]);
  const new_exchange_list = ref([]);
  const junk_exchange_list = ref([]);
  const junk_recovery_list = ref([]);
  const gift_list = ref([]);
  const options = ref([
    /* { label: '现金', value: 'cash', isSelect: false },
    { label: '微信', value: 'wechat', isSelect: false },
    { label: '支付宝', value: 'alipay', isSelect: false },
    { label: '刷卡', value: 'card', isSelect: false },
    { label: '银行转账', value: 'transfer', isSelect: false } */
  ]);
  const form = reactive({
    order_sn: '',
    cash: '',
    wechat: '',
    alipay: '',
    card: '',
    transfer: '',
    note: ''
  });

  onMounted(() => {
		get_pay_type_select().then((res) => {
			console.log('res==', res)
		  res.forEach((item) => {
		    item.isSelect = false;
		  });
		  options.value = res;
		});
    if (props.orderSn) {
      form.order_sn = props.orderSn;
      getDetail();
    }
  });
  const change = (e) => {
    options.value.forEach((item) => {
      e.forEach((m) => {
        if (item.value == m) {
          item.isSelect = true;
        }
      });
    });
  };
  const change2 = (e) => {
    options.value.forEach((item) => {
      if (item.value == e) {
        item.isSelect = false;
      }
    });
  };

  const getDetail = () => {
    get_sales_detail({
      order_sn: props.orderSn
    }).then((res) => {
      info.value = res.order;
      payInfo.value = res.pay;
      goods_list.value = res.item.goods_list;
      ornament_list.value = res.item.ornament_list;
      new_exchange_list.value = res.item.new_exchange_list;
      junk_exchange_list.value = res.item.junk_exchange_list;
      junk_recovery_list.value = res.item.junk_recovery_list;
      gift_list.value = res.item.gift_list;
    });
  };

  const save = () => {
    Modal.confirm({
      title: '提示',
      content: '确定整单退货?',
      maskClosable: true,
      onOk: () => {
        emit('orderRefund', form);
      }
    });
  };

  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
  defineExpose({});
</script>

<style lang="less" scoped>
  .pay_label {
    display: inline-block;
    min-width: 70px;
    text-align: right;
  }
</style>
